<template>
  <div class="ele">
       <el-table
    :data="tableData"
    style="width: 100%"
    height="250">
    <el-table-column
      label="Id"
      width="120">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="课程类型"
      width="180">
      <template slot-scope="scope">
          <p>{{ scope.row.CourseName }}</p>
      </template>
    </el-table-column>
    <el-table-column
      label="课程名称"
      width="180">
      <template slot-scope="scope">
          <p>{{ scope.row.description }}</p>
      </template>
    </el-table-column>
    <el-table-column
      label="描述"
      width="180">
      <template slot-scope="scope">
          <p>{{ scope.row.type }}</p>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
          <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
        <el-popconfirm
         size="mini"
        title="这是一段内容确定删除吗？"
         @confirm="handleDelete(scope.$index, scope.row)"
        >
        <el-button slot="reference">删除</el-button>
    </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
    <el-row
     fixed="left"
     style="width: 10%;margin-left:10px; "
    >
     <el-button  @click="show = !show">添加</el-button>
    </el-row>
    <el-form v-model="newData" style="width:700px; margin-left:30%; background:#cdcdcd; line-height:40px;  border:10px soild balck; border-radius:10px;" ref="numberValidateForm" label-width="100px" class="demo-ruleForm" v-if="show">
        <el-form-item
            label="Id"
            prop="date"
        >
            <el-input  v-model="newData.date" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="课程类型"
            prop="data"
        >
            <el-input type="data" v-model="newData.CourseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="课程名称"
            prop="data"
        >
            <el-input type="data" v-model="newData.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="简介"
            prop="data"
        >
            <el-input type="data" v-model="newData.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submitForm(newData)">提交</el-button>
            <el-button @click="resetForm">取消</el-button>
        </el-form-item>
        
</el-form>
<el-form v-model="newData" style="width:400px; margin-left:30%; line-height:40px;  border:10px soild balck; border-radius:10px;" ref="numberValidateForm" label-width="100px" class="demo-ruleForm" v-if="showSu">
        <el-form-item
            label="Id"
            prop="data"
        >
            <el-input type="data" v-model="newData.data" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="课程类型"
            prop="data"
        >
            <el-input type="data" v-model="newData.CourseName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="课程名称"
            prop="data"
        >
            <el-input type="data" v-model="newData.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
            label="简介"
            prop="data"
        >
            <el-input type="data" v-model="newData.type" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit(newData)">提交</el-button>
            <el-button @click="resetForm">取消</el-button>
        </el-form-item>
</el-form>

</div>
</template>
<script>

export default ({
name:'ele',
data(){
    return{
        show:false,
        showSu:false,
            numberValidateForm: {
            data: ''
        },
        newData:{},
        tableData: [
            {
            date: '1',
            CourseName:'第一专业',
            description:'web',
            type:'程序元家园',
            }, 
            {
                date: '2',
                CourseName:'第二专业',
                description:'java',
                type:'后端之家',
            }, 
            {
                date: '3',
                CourseName:'第三专业',
                description:'历史',
                type:'0000',
            }, ]
    }
},
watch:{
    tableData:{
        handler (newVal){
            console.log(newVal)
            localStorage.setItem('list',JSON.stringify(newVal))
        },
        deep:true
    }
},
created(){
    if(JSON.parse(localStorage.getItem('list')) == null){
        console.log('111')
    }else{
        this.tableData=JSON.parse(localStorage.getItem('list'))
    }
},
    methods: {
      handleEdit(index) {
        this.showSu = !this.showSu
        console.log(index)
        
      },
      handleDelete(index,) {
        this.tableData.splice(index,1);
      },
       submitForm() {
            this.show = !this.show
            this.tableData.push(JSON.parse(JSON.stringify(this.newData)))//深拷贝
            this.newData={};
      },
       submit(newData,index) {
           console.log(this.tableData)
           console.log(newData)
           console.log(index)
      },
      resetForm() {
       this.show = !this.show
      }
    }
})
</script>
<style lang="scss" scoped>

</style>
